<template>
  <div>
    <div class="part part-1">
      <h2>1.File对象</h2>
      <el-form label-width="120" :inline="true" size="small" style="width: 200px;">
        文件内容：<el-input v-model="content"></el-input>
        文件名：<el-input v-model="fileName"></el-input>
        文件格式：<el-input v-model="fileType"></el-input>
      </el-form>
      <el-button size="mini" type="primary" @click="makeFile">生成File对象</el-button>
      <br>
      <a :href="fileUrl" target="_blank">打开文件</a>
    </div>
  </div>
</template>

<script>
  export default {
    name: "index",
    data() {
      return {
        content: '',
        fileName: '',
        fileType: '',
        fileUrl: 'text/plain'
      }
    },
    methods: {
      makeFile() {
        const file = new File([this.content], this.fileName, { type: this.fileType, lastModified: Date.now() })
        this.fileUrl = window.URL.createObjectURL(file);
      }
    }
  }
</script>

<style scoped>

</style>
